<template>
  <div class="nc-head" id="detail-head">
    <div class="nc-head-leaf">
      <div class="nc-head-leaf-up">
        <div class="up">


          <div class="nc-title" v-if="mode === 'edit'">
            <input v-model="data.headInfo.title" type="text"/>
          </div>
          <div class="nc-title" v-if="mode === 'read'">
            <span>{{ data.headInfo.title }}</span>
          </div>

          <div class="nc-tag">
            <div v-for="(item, index) in tagShows" :key="item?.id">
              <TagTest :text='item.describe' :total-color="item.color" :describe="item.remark"
                       fontSize="20px" :id="item.id" >
              </TagTest>
            </div>
            <el-icon style="position: relative;justify-items: center;right: 0;width: 30px" v-if="mode === 'edit'">
              <CirclePlusFilled @click="openTagDialog" />
            </el-icon>
          </div>

          <div class="nc-operate">
            <button class="change-button" @click="switchMode" v-if="mode === 'edit'">
                  <span class="icon">
                  编辑模式
                  </span>
            </button>
            <button class="change-button-blue" @click="switchMode" v-if="mode === 'read'">
                  <span class="icon">
                  阅读模式
                  </span>
            </button>
          </div>
        </div>

        <div class="down">
          <div class="slot-title" v-if="mode === 'edit'">
            <input v-model="data.headInfo.titleUnder" type="text"/>
          </div>
          <div class="slot-title" v-if="mode === 'read'">
            <span>{{ data.headInfo.titleUnder }}</span>
          </div>
        </div>

      </div>

      <div class="nc-introduce" ref="ncIntroduce">
        <div class="content" v-if="mode === 'edit'">
          <input v-model="data.headInfo.context" type="text"/>
        </div>
        <div class="content" v-if="mode === 'read'">
          <span>{{ data.headInfo.context }}</span>
        </div>


        <div class="nc-music">
          nc-music
        </div>
      </div>

      <div class="nc-head-leaf-link">
        <div class="head">
          <div class="title">
            相关帖子
          </div>
          <el-icon class="operation">
            <el-button type="success" class="button" plain v-if="mode === 'edit'" @click="openAddTip">添加</el-button>
            <el-button type="success" class="button" plain v-if="mode === 'edit'">删除</el-button>
            <el-button type="success" class="button" plain>更多</el-button>
          </el-icon>
        </div>

        <div class="link">
          <!-- 使用 v-for 遍历数据数组 -->
          <div v-for="(item, index) in items" :key="item?.id">
            <div  class="line-box">
              <el-image class="image-box" :src="item?.pictureId" @click="goToUrl(item)">
              </el-image>
              <el-tooltip
                  :content="item?.des"
                  placement="top"
                  trigger="hover"
              >
                <div class="image-des" @click="goToUrl(item)">
                  {{ item?.des }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>

      </div>
    </div>
<!--    <el-popover  class="image-des" trigger="hover" content="{{ item?.des }}" placement="top" width="200">-->
    <div class="nc-header-right">
      <div class="picture" @click="showPick">
        <picture-inner-list ref="pictureList" @setCover="setCover" v-if="innerListVisible" :masterId="props.id">
        </picture-inner-list>
<!--        <div class="des">-->
<!--          文本描述，靠近时会出想双上下箭头-->
<!--        </div>-->
      </div>
    </div>

  </div>

  <PicturePTaker ref="pc" :master-id="props.id" @refreshPictureData="refashPicture"></PicturePTaker>
  <AddTip ref="tip" :master-id="props.id"></AddTip>
  <TagListDialog ref="tagList" :master-id="props?.id" @refreshTags="refreshTags"></TagListDialog>
</template>

<script setup lang="ts">

import PictureInnerList from "@/views/novel/character/components/head/PictureInnerList.vue";
import TagTest from "@/views/novel/tag/components/Children/tagTest.vue";
import {onMounted, reactive, ref, watch} from "vue";
import PicturePTaker from "@/views/novel/character/components/head/PicturePTaker.vue";
import {getDetailModeHeadDetailApi, updateDetailModeHeadApi} from "@/api/modules/detailModel/detailModeHead";
import {getChararterTagListApi, getDetailModeTagListApi} from "@/api/modules/novel/chararterTag";
import type {DetailModeHeadForm, DetailModeHeadRow} from "@/api/types/detailmodel/detailModeHead";
import type {DetailModePictureRow} from "@/api/types/detailmodel/detailModePicture";
import type {ChararterTagRow} from "@/api/types/novel/chararterTag";
import AddTip from "@/views/novel/character/components/head/AddTip.vue";
import {getDetailModeTipsListApi} from "@/api/modules/detailModel/detailModeTips";
import type {DetailModeTipsRow} from "@/api/types/detailmodel/detailModeTips";
import {CirclePlusFilled} from "@element-plus/icons-vue";
import TagListDialog from "@/views/novel/character/components/head/TagListDialog.vue";
import {ElMessage} from "element-plus";

let mode = ref('read');
let visible2 = ref(false);
let innerListVisible = ref(true);
let pc = ref();
let tagShows = ref()
let tip = ref();
let pictureList = ref();
let tagList = ref();
let test = reactive({
  test: '测试',
  test2: '测试2',
  totalColor: 'rgba(172, 97, 57,0.1)',
  describe: '这是一段提示',
  fontSize: '25px'
})

let props = defineProps({
  id: Number
})

let data = reactive({
  headInfo: {} as DetailModeHeadRow,
  pictures: [] as DetailModePictureRow,
  tags: {} as ChararterTagRow,
});

let emit = defineEmits(['update:model'])

//测试
let headInfo = getDetailModeHeadDetailApi({id: props?.id});
let tags = getChararterTagListApi({id: props?.id});
console.log(headInfo)
console.log(tags)

// 封面设置
const showPick = () => {
  visible2.value = true;
  console.log('触发显示', visible2.value);
};

let setCover = (activeIndex: any) => {
  innerListVisible.value = false;

  console.log('所选图片地址为：' + activeIndex)
  //pickProp.image = activeIndex;  这里貌似只有初始化才起作用,后面改变了值没有反应
  pc.value.showPicture(activeIndex)

  innerListVisible.value = true;
}
//----------------@tag----------------------
let openTagDialog = ()=>{
  tagList.value.openTagDialog()
}


let refreshTags = (sdf : any)=>{
  console.log('执行回调获数据方法')
  refreshTagData()
}

let refreshTagData = ()=>{
  getDetailModeTagListApi({busId:props.id}).then(res=>{
    tagShows.value = res?.data?.rows;
    console.log('新的队列为：', tagShows.value)
  })
  getDetailModeHeadDetailApi({id:props.id}).then(res=>{
    console.log('sdafasdfsfwerfsdafwe ：', res)
    data.headInfo.musicFile = res.data?.musicFile;
    data.headInfo.title = res.data?.title;
    data.headInfo.titleUnder = res.data?.titleUnder;
    data.headInfo.status = res.data?.status;
    data.headInfo.context = res.data?.context;
  })

}
refreshTagData()



//---------------@tip----------------------
let items = ref(<DetailModeTipsRow>[])
let tipList = getDetailModeTipsListApi({
  belongId: props?.id,
  page: 1,   // 假设默认值为1
  limit: 5, // 假设每页显示10条记录
}).then((res: any) => {
  items = res?.data?.rows
});

let openAddTip = () => {
  tip.value.openTipDialog()
}

let goToUrl = (item: any)=>{
  window.open(item.url, '_blank');

}

let refashPicture = ()=>{
  pictureList.value.refreshPictures()
}


//------------@同步编辑模式到所有模块------------
watch(mode, (newValue) => {
  emit('update:model', newValue)
})
let updateModel = (newModelValue: any) => {
  mode.value = newModelValue;
}
let switchMode = () => {
  if (mode.value === 'read') {
    mode.value = 'edit'
  } else {
    //更新头部模块
    let update :  DetailModeHeadForm ={
      id:props.id,
      title: data?.headInfo?.title,
      titleUnder: data?.headInfo?.titleUnder,
      //status: data?.headInfo?.status,
      context: data?.headInfo?.context,
    }
    updateDetailModeHeadApi(update).then(res =>{
      ElMessage.success('保存成功')
    })
    mode.value = 'read'
  }
}

defineExpose({updateModel})
</script>


<style scoped lang="scss">

.el-button--success.is-plain {
  --el-button-bg-color: rgb(225, 225, 225); /* 修复 RGB 值为整数 */
}

// 头部
.nc-head {
  //padding: 20px; /*不被建议使用padding*/
  position: relative;
  //top: 20px; /*使用top不会加入到父类的auto中*/
  margin-top: 10px;
  //width: 100%;
  //min-height: 500px; 由right决定
  align-items: flex-start;
  background-color: rgba(220, 236, 255, 1);
  //overflow: hidden; /* 防止子元素超出   子元素溢出的部分会进行移除 -----  冲突源自于使用了margin-left，然后relative没有起作用  且存在副作用，右对齐时不生效  大 答案：使用Padding进行间隔 */
  display: flex; /* 设置为 Flex 容器 */
  //color: black;
  color: #4a90e2;

  .nc-head-leaf {
    position: relative; /* 不加这个会让position: absolute;  定位失误，使其位置丢失*/
    width: 70%;
    //background-color: rgba(255, 236, 255, 1);
    border: 4px solid rgba(220, 236, 255, 1); /* 红色实线边框 */
    border-radius: 5px; /* 所有四个角的圆角半径为 10px */

    .nc-head-leaf-up {
      position: relative;
      justify-content: left;
      align-items: center; /* 垂直方向居中 */
      height: 80px;
      background-color: rgba(220, 236, 255, 1);

      .up {
        position: relative;
        //height: 30%;
        //height: 97px;
        height: auto;
        display: flex; /* 设置为 Flex 容器 */
        background-color: rgba(220, 236, 255, 1);
        justify-content: left; //水平居中
        align-items: center; /* 垂直方向居中 */

        .nc-title {
          text-align: left; /* 文本居中 */
          margin-left: 10px;
          font-size: 34px; /* 百度百科字体大小 */
          //font-weight: bold;  加粗
          //min-width: 20%;
          max-height: 45px;
          width: auto;
          padding: 5px;
          //width: calc(1ch * 10); /* 根据字符长度来设置宽度 */
        }

        .nc-tag {
          //justify-content: center; //水平居中
          //margin-left: 10px;
          align-items: center; /* 垂直方向居中 */
          position: relative;
          display: flex;

        }

        .nc-operate {
          position: absolute; /* 这里不用relative的原因是定位父元素导致不行，要用abosult来脱离文档定位其祖先 */
          right: 0; /* 右对齐 */
          margin-right: 10px; /* 右对齐 */

          .change-button {
            background-color: transparent;
            border: 2px solid pink;
            color: pink;
            padding: 4px 6px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            position: relative;
            display: inline-flex;
            align-items: center;
          }

          .change-button:hover {
            background-color: rgba(255, 192, 203, 0.3);
          }

          .change-button-blue {
            background-color: transparent;
            border: 2px solid lightskyblue;
            color: lightskyblue;
            padding: 4px 6px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            position: relative;
            display: inline-flex;
            align-items: center;
          }

          .change-button-blue:hover {
            background-color: rgba(135, 206, 250, 0.3);
          }
        }
      }

      .down {
        background-color: rgba(220, 236, 255, 1);

        .slot-title {
          font-size: 14px;
          min-height: 20px;
          margin-left: 10px;
          //background-color: rgba(220, 236, 255, 1);
        }
      }


      .down-operation {
        justify-content: left; //面向祖先辈？
        position: absolute; /* 启用弹性布局 */
        right: 0;
        bottom: 0;
        //justify-content: flex-end;  /* 将按钮向右对齐 */
        //min-height: 5px;
      }
    }

    .nc-introduce {
      position: relative;
      //margin-top: 10px;
      width: 100%;
      min-height: 210px;
      //height: 30%;
      //height: 50px;
      //display: flex; /* 设置为 Flex 容器 */
      //background-color: rgba(255, 255, 66, 0.2);
      //background-color: rgba(220, 236, 255, 1);
      background-color: rgba(241, 242, 243, 0.5);

      .content {
        width: 100%;

        :before {
          content: "\00a0\00a0\00a0\00a0\00a0"; /* 这里用了两个普通空格，也可以用&emsp;或&ensp;获得更宽的空格 */
        }

        font-size: 14px;
      }

      .nc-music {
        position: absolute; /* 这里不用relative的原因是定位父元素导致不行，要用abosult来脱离文档定位其祖先 */
        right: 0; /* 右对齐 */
        bottom: 0; /* 底部对齐 */
        //background-color: rgba(0, 0, 0);
      }
    }

    .nc-head-leaf-link {
      position: relative;
      min-height: 175px;

      .head {
        background-color:  rgba(220, 236, 255, 1);
        position: relative;
        display: flex; /* 设置为 Flex 容器 */
        .title {
          font-size: 19px;
        }

        .operation {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: absolute;
          width: 23%;
          height: 100%;
          right: 0;
          color: black;

          .button {
            height: 100%;
            margin-left: 5px;
          }
        }
      }


      .link {
        width: 100%;
        justify-content: left; //左对齐
        position: relative;
        display: flex;
        background-color: rgba(241, 242, 243, 1);

        .line-box {
          justify-content: center;
          align-items: center;
          margin: 8px 20px 8px 20px;
          flex-wrap: wrap;

          .image-box{
            position: relative;
            height: 140px;
            transition: transform 0.3s ease;
            width: 140px;
            background-color: lightblue; /* 给背景颜色方便查看 */
          }

          .image-box:hover {
            z-index: 1;
            transform: scale(2.05); /* 放大图片 */
            cursor: pointer;  /* 鼠标变为手型 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 添加阴影 */
          }

          .image-des {
            position: relative;
            text-align: center;
            font-size: 14px;
            width: 140px;
            overflow: hidden;  /* 隐藏超出的内容 */
            height: 40px;      /* 限制高度 */
            line-height: 20px; /* 行高 */
            display: block;
            text-overflow: ellipsis; /* 显示省略号 */
            display: -webkit-box; /* 必须使用这个属性来实现多行文本的溢出 */
            -webkit-line-clamp: 2; /* 限制显示 2 行文字 */
            -webkit-box-orient: vertical; /* 设置为垂直方向的排列 */
          }

          .image-des:hover {
            cursor: pointer;  /* 鼠标变为手型 */
            color: blue;       /* 文字变为蓝色 */
          }
        }

      }
    }
  }

  .nc-header-right {
    border: 4px solid rgba(220, 236, 255, 1); /* 红色实线边框 */
    border-radius: 5px; /* 所有四个角的圆角半径为 10px */
    width: 30%;
    height: auto;
    position: relative;

    .picture {
      position: relative;
      margin-left: 5px;
      box-shadow: rgb(255, 255, 255) 0 2px 10px 2px;
      min-height: 80 + 22 + 290 + 120px;

      .des {
        position: absolute;
        display: flex;
        justify-content: center; /* 水平居中 */
        text-align: center;
        width: 100%; /*不加就会默认从左对齐 */
        bottom: 0;
      }
    }
  }
}

</style>